﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="production/images/favicon.ico" type="image/ico" />
    <title>金凤切割车间看板</title>
    <!-- Bootstrap -->
    <link href=" vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=" vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href=" vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href=" vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href=" vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href=" vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet" />
    <!-- bootstrap-daterangepicker -->
    <link href=" vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href=" build/css/custom.css" rel="stylesheet">
    <!-- jQuery -->
    <script src=" vendors/jquery/dist/jquery.min.js"></script>
</head>

<body class="nav-md">
    <div class="container body" id="app">
        <div class="main_container">
            <div dangerouslySetInnerHTML='123123'></div>
            <div class="col-md-3 left_col">
                <div class="left_col scroll-view">
                    <div class="navbar nav_title" style="border: 0;">
                        <a href="homepage.html" class="site_title"><span>金凤切割车间看板</span></a>
                    </div>
                    <div class="clearfix"></div>
                    <!-- menu profile quick info -->
                    <div class="profile clearfix">
                        <div class="profile_pic">
                            <img src="production/images/img.jpg" alt="..." class="img-circle profile_img">
                        </div>
                        <!--<div class="profile_info">
                            <span>欢迎</span>
                            <h2>致迪</h2>
                        </div>-->
                    </div>
                    <!-- /menu profile quick info -->
                    <br />
                    <!-- sidebar menu -->
                    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                        <div class="menu_section">
                            <h3>管理员</h3>
                            <ul class="nav side-menu">
                                <li>
                                    <a><i class="fa fa-home"></i> 主页 <span class="fa fa-chevron-down"></span></a>
                                    <!--<ul class="nav child_menu">
                                        <li><a href="#">车间看板</a></li>
                                        <li><a href="#">机器状态</a></li>
                                    </ul>-->
                                </li>
                                <li>
                                    <a><i class="fa fa-edit"></i> 设备 <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="#">总览</a></li>
                                        <li><a href="#">设置</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a><i class="fa fa-desktop"></i> 能源 <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="#">看板</a></li>
                                        <li><a href="#">报表</a></li>
                                        <li><a href="#">费用管理</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a><i class="fa fa-table"></i> 报警 <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="#">看板+统计</a></li>
                                        <li><a href="#">设置</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a><i class="fa fa-bar-chart-o"></i> 管理 <span class="fa fa-chevron-down"></span></a>
                                    <!--<ul class="nav child_menu">
                                        <li><a href="#">订单管理</a></li>
                                        <li><a href="#">人员管理</a></li>
                                    </ul>-->
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- /sidebar menu -->
                    <!-- /menu footer buttons -->
                    <div class="sidebar-footer hidden-small">
                        <a data-toggle="tooltip" data-placement="top" title="设置">
                            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="全屏">
                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="锁定">
                            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="退出">
                            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
                        </a>
                    </div>
                    <!-- /menu footer buttons -->
                </div>
            </div>
            <!-- top navigation -->
            <div class="top_nav">
                <div class="nav_menu">
                    <nav>
                        <div class="nav toggle">
                            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                        </div>
                        <ul class="nav navbar-nav navbar-right">
                            <li class="">
                                <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                                    <img src="production/images/img.jpg" alt="">管理员
                                    <span class="fa fa-angle-down"></span>
                                </a>
                                <!-- <ul class="dropdown-menu dropdown-usermenu pull-right">
                                    <li><a href="javascript:;"> 信息</a></li>
                                    <li>
                                        <a href="javascript:;">
                                            <span class="badge bg-red pull-right">50%</span>
                                            <span>设置</span>
                                        </a>
                                    </li>
                                    <li><a href="javascript:;">帮助</a></li>
                                    <li><a href="#"><i class="fa fa-sign-out pull-right"></i>退出</a></li>
                                </ul> -->
                            </li>
                            <!-- <li role="presentation" class="dropdown">
                                <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="fa fa-envelope-o"></i>
                                    <span class="badge bg-red">6</span>
                                </a>
                                <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
                                    <li>
                                        <a>
                                            <span class="image"><img src="production/images/img.jpg" alt="Profile Image" /></span>
                                            <span>
                                                <span>机器1</span>
                                                <span class="time">3分钟前</span>
                                            </span>
                                            <span class="message">
                                                异常重启
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <span class="image"><img src="production/images/img.jpg" alt="Profile Image" /></span>
                                            <span>
                                                <span>机器2</span>
                                                <span class="time">5分钟前</span>
                                            </span>
                                            <span class="message">
                                                温度过高
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <span class="image"><img src="production/images/img.jpg" alt="Profile Image" /></span>
                                            <span>
                                                <span>机器3</span>
                                                <span class="time">10分钟前</span>
                                            </span>
                                            <span class="message">
                                                系统异常
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <div class="text-center">
                                            <a>
                                                <strong>查看所有</strong>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </li> -->
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- /top navigation -->
            <!-- page content -->
            <div class="right_col" role="main">
                <!-- top tiles -->
                <div class="row tile_count">
                    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" v-for='item in kanBan'>
                        <span class="count_top" style="font-size:16px"><i class="fa fa-user"></i><span
                                style="font-size:17px;margin-left: 8px;" v-text="item.MachineName"></span></span>
                        <div class="count" style="font-size:17px" v-text="'开机时间：'+item.SystemOpenedTime"></div>
                        <div class="count blue" style="font-size:30px" :style="{color:item.color}" v-text="item.stateName"></div>
                        <div class="count" style="font-size:17px" v-text="'当前任务：'+item.CurrentFile"></div>
                        <div class="count" style="font-size:17px" v-text="'电量(度)：'+item.Power"></div>
                        <div class="count" style="font-size:17px" v-text="'燃/氧气(L)：'+item.Gas+'/'+item.O2"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4" v-for='(item,index) in kanBan'>
                        <div class="x_panel">
                            <div class="x_title">
                                <h2 v-text="item.MachineName"></h2>
                                <div class="filter">
                                    <ul class="nav navbar-right panel_toolbox pull-right">
                                        <li>
                                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <!-- <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                                aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                                <li>
                                                    <a href="#">Settings 1</a>
                                                </li>
                                                <li>
                                                    <a href="#">Settings 2</a>
                                                </li>
                                            </ul>
                                        </li> -->
                                        <li>
                                            <a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <table class="" style="width:100%">
                                    <tr>
                                        <th style="width:37%;">
                                            <p>加工进度</p>
                                        </th>
                                        <th>
                                            <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                                                <p class="">类别</p>
                                            </div>
                                            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                                <p class="">数量</p>
                                            </div>
                                        </th>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="chart" v-bind:id="index" v-bind:data-percent="item.Percentage">
                                                <span class="percent"></span>
                                            </span>
                                        </td>
                                        <td>
                                            <table class="tile_info">
                                                <tr>
                                                    <td>
                                                        <p><i class="fa fa-square green"></i>已加工任务数</p>
                                                    </td>
                                                    <td v-text="item.FinishedCount"></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <p><i class="fa fa-square" style="color:#808080"></i>剩余任务数</p>
                                                    </td>
                                                    <td v-text="item.SurplusCount"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12" style="height: 500px;">
                        <div class="x_panel" style="height: 485px;">
                            <div class="x_title">
                                <h2>报警消息</h2>
                                <div class="filter">
                                    <ul class="nav navbar-right panel_toolbox pull-right">
                                        <li>
                                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <!-- <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                                aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                                <li>
                                                    <a href="#">Settings 1</a>
                                                </li>
                                                <li>
                                                    <a href="#">Settings 2</a>
                                                </li>
                                            </ul>
                                        </li> -->
                                        <li>
                                            <a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div>
                                        <ul class="list-unstyled top_profiles scroll-view">

                                            <li class="media event" v-for='item in jinBao'>
                                                <a class="pull-left border-aero profile_thumb">
                                                    <i class="fa fa-user aero"></i>
                                                </a>
                                                <div class="media-body">
                                                    <a class="title" href="#" v-text='item.MachineName'></a>
                                                    <p v-text='item.AlarmName'></p>
                                                    <p>
                                                        <small v-text="item.StartTime"></small>
                                                    </p>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /top tiles -->
            </div>
            <!-- /page content -->
            <!-- footer content -->
            <footer>
                <div class="pull-right">
                    技术支持：宁波金凤焊割机械制造有限公司<br />联系地址：浙江省宁波市杭州湾新区兴慈七路337号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <div class="clearfix"></div>
            </footer>
            <!-- /footer content -->
        </div>
    </div>
    <script src="production/js/vue/vue.js" type="text/javascript"></script>
    <script src="production/js/common.js" type="text/javascript"></script>
    <script src="production/js/index.js" type="text/javascript"></script>
    <!-- Bootstrap -->
    <script src=" vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script src=" vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script src=" vendors/nprogress/nprogress.js"></script>
    <!-- Chart.js -->
    <script src=" vendors/Chart.js/dist/Chart.min.js"></script>
    <!-- gauge.js -->
    <script src=" vendors/gauge.js/dist/gauge.min.js"></script>
    <!-- bootstrap-progressbar -->
    <script src=" vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- iCheck -->
    <script src=" vendors/iCheck/icheck.min.js"></script>
    <!-- Skycons -->
    <script src=" vendors/skycons/skycons.js"></script>
    <!-- Flot -->
    <script src=" vendors/Flot/jquery.flot.js"></script>
    <script src=" vendors/Flot/jquery.flot.pie.js"></script>
    <script src=" vendors/Flot/jquery.flot.time.js"></script>
    <script src=" vendors/Flot/jquery.flot.stack.js"></script>
    <script src=" vendors/Flot/jquery.flot.resize.js"></script>
    <!-- Flot plugins -->
    <script src=" vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
    <script src=" vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
    <script src=" vendors/flot.curvedlines/curvedLines.js"></script>
    <!-- DateJS -->
    <script src=" vendors/DateJS/build/date.js"></script>
    <!-- JQVMap -->
    <script src=" vendors/jqvmap/dist/jquery.vmap.js"></script>
    <script src=" vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
    <script src=" vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script src=" vendors/moment/min/moment.min.js"></script>
    <script src=" vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="build/js/custom.js"></script>
    <!-- jQuery Sparklines -->
    <script src=" vendors/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
    <!--highcharts-->
    <script src=" build/js/Highcharts-5.0.12/highcharts.js" type="text/javascript"></script>
    <script src=" build/js/Highcharts-5.0.12/highcharts-more.js" type="text/javascript"></script>
    <script src=" build/js/Highcharts-5.0.12/modules/exporting.js" type="text/javascript"></script>
    <script src=" build/js/Highcharts-5.0.12//modules/funnel.js" type="text/javascript"></script>
    <script src=" build/js/Highcharts-5.0.12/modules/series-label.js" type="text/javascript"></script>
    <!-- <script src=" build/js/Highcharts-5.0.12/modules/oldie.js" type="text/javascript"></script> -->
    <script src=" build/js/Highcharts-5.0.12/themes/grid-light.js" type="text/javascript"></script>
    <script src=" build/js/Highcharts-5.0.12/modules/xrange-series.js" type="text/javascript"></script>
    <script src=" build/js/Highcharts-5.0.12/modules/xrange-series.src.js" type="text/javascript"></script>
    <!--data-->
    <script src=" build/js/data.js" type="text/javascript"></script>
    <!-- easy-pie-chart -->
    <script src=" vendors/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>


</body>

</html>